<template>
  <div class="el-tree-select" id="treeSelectDomId">
    <el-tree-select
      v-model="valueId"
      ref="selectTree"
      node-key="id"
      :accordion="accordion"
      :data="options"
      :props="objMap"
      :node-key="objMap.value"
      :expand-on-click-node="showCheckbox"
      :show-checkbox="showCheckbox"
      :check-strictly="checkStrictly"
      :filter-node-method="filterNode"
      :filterable="filterable"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      :highlight-current="false"
      :filter-method="selectFilterData"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  /* 配置项 */
  objMap: {
    type: Object,
    default: () => {
      return {
        value: 'id', // ID字段名
        label: 'label', // 显示名称
        children: 'children', // 子级字段名
      }
    },
  },
  /* 自动收起 */
  accordion: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  /**当前双向数据绑定的值 */
  value: {
    type: [String, Number],
    default: '',
  },
  /**当前的数据 */
  options: {
    type: Array,
    default: () => [],
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: '',
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  showCheckbox: {
    type: Boolean,
    default: false,
  },
  filterable: {
    type: Boolean,
    default: true,
  },
  checkStrictly: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['update:value', 'handleNodeClick'])

const valueId = computed({
  get: () => props.value,
  set: (val) => {
    emit('update:value', val)
  },
})

function handleNodeClick(node) {
  emit('handleNodeClick', node)
}
function selectFilterData(val) {
  proxy.$refs.selectTree.filter(val)
}
function filterNode(value, data) {
  if (!value) return true
  return data[props.objMap['label']].indexOf(value) !== -1
}
</script>

<style lang="scss" scoped></style>
